<template>
    <view class="cardGroup">
        <view class="cardItem">
            <view class="rushiWrap">
                <view class="titleWrap">
                    <text class="title font15 fontBold">各区新房</text>
                </view>
                <view class="plateBtn top-10">
                    <block v-for="(item, index) in list" :key="index">
                        <view class="btn text-center boxShadow bg-fff" @click="clickPlateBtn(item)">
                            {{ item.label }}
                        </view>
                    </block>
                </view>
            </view>
        </view>

        <view class="cardItem">
            <view class="rushiWrap">
                <view class="titleWrap">
                    <text class="title font15 fontBold">总价找房</text>
                </view>
                <view class="amountBtn top-10">
                    <block v-for="(item, index) in amounts" :key="index">
                        <view class="btn text-center boxShadow bg-fff" @click="clickAmountBtn(item)">
                            {{ item.title }}
                        </view>
                    </block>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	export default {
        data() {
        	return {
        	}
        },
        props:{
            list: {
                value: Array,
                default: []
            },
            amounts: {
                value: Array,
                default: []
            }
        },
		methods:{
            //点击区域跳转
            clickPlateBtn(row) {
                uni.navigateTo({
                    url: `/pages/products/map/plate/page?areaCode=${row.value}`
                })
            },

            //点击总价按钮
            clickAmountBtn(row) {
                uni.navigateTo({
                    url: `/pages/products/ranking/price-ranking-list?param=${row.value}`
                })
            }
		}
	}
</script>

<style scoped lang="scss">
    .rushiWrap{
        margin: 40rpx 28rpx;
        .plateBtn{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20rpx;
            .btn{
                justify-content: space-between;
                padding: 10rpx 20rpx;
                border-radius: 10rpx;
            }
        }
        .amountBtn{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20rpx;
            .btn{
                padding: 10rpx 20rpx;
                border-radius: 10rpx;
            }
        }
    }
</style>
